<template>
  <div class="page">
    <div v-if="isGroupInfoComplete == 'N'">
      <div class="mgb-s">
        <floor v-if="task.document && task.document.user" :avatar-url="task.document.user.avatarUrl"
          :created-at="task.document.createdAt" role="tearch"
          :expire-at="task.expireAt"
          :title="task.document.name"
          :nick-name="task.document.user.nickName" :blocks="task.document.data.blocks"></floor>
      </div>
      <div class="fix-bottom" @tap="onReply">
        <div class="weui-flex v-mdl" style="padding-right: 10px;">
          <div class="weui-flex__item" style="padding: 10px 16px;">
            <div class="cf" style="height: 30px;border: 1px solid #00ADCE;border-radius: 3px;line-height: 30px;font-size:12px;padding-left: 10px;padding-top: 7px;">
              <notify-btn cls="ui btn empty fullwidth ta-l c-gray fs-5" :disabled="true">
                请输入
              </notify-btn>
            </div>
          </div>
          <div class="ta-c" style="width: 50px;">
            <notify-btn cls="ui btn empty">
              <i style="font-size: 22px;" class="if icon-share"></i>
              <div class="fs-6" style="padding-top: 5px;">分享</div>
            </notify-btn>
          </div>
          <div class="ta-c" style="width: 50px;">
            <notify-btn cls="ui btn empty">
              <i style="font-size: 22px;" class="if icon-users"></i>
              <div class="fs-6" style="padding-top: 5px;">看同学</div>
            </notify-btn>
          </div>
        </div>
      </div>
      <div class="modal" v-if="isShowCompleteGroupInfoPanel">
        <div class="modal-inner" @tap.stop="">
          <div class="modal-hd" style="padding: 16px;border-bottom: none;">
            <div class="modal-title">
              <div v-if="task.group.name" class="fw fs-2">{{task.group.name}}</div>
              <div v-else-if="task.group.openGroupId" class="fw fs-2"><open-data class="fs-l" type="groupName" :open-gid="task.group.openGroupId"></open-data></div>
              <div v-else class="fw fs-2">未命名群组</div>
            </div>
            <div class="modal-desc cf fs-3" style="padding-top: 8px;">
              班主任：
              <span style="width: 22px;position: relative;top: 6px;">
                <avatar v-if="task.document.user && task.document.user.avatarUrl" :src="task.document.user.avatarUrl"></avatar>
              </span>
              {{task.document.user.nickName}}
            </div>
            <div class="modal-close" @tap="isShowCompleteGroupInfoPanel = false"><i class="if icon-close"></i></div>
          </div>
          <div class="modal-bd pd-l pdt-0">
            <div class="weui-flex v-mdl bd-t pdv">
              <div class="weui-flex__item">
                <input :cursor-spacing="60" type="text" placeholder="请填入真实姓名" v-model="name" maxlength="15">
              </div>
              <div style="width: 60px;" class="c-gray" :class="{'c-red': name.length >= 15}">
                {{name.length}}/15
              </div>
              <div style="width: 60px;" class="ta-r bd-l">
                <notify-btn cls="ui btn link" @hit="isShowFamilyRolePanel = true" :slotData="slotData">{{slotData.identity}}</notify-btn>
              </div>
            </div>
            <div class="pdt-xl bd-t">
              <notify-btn cls="ui btn primary" @hit="onJoin" :disabled="!name" :loading="isLoading">加入班级</notify-btn>
            </div>
          </div>
        </div>
      </div>

      <pop v-model="isShowFamilyRolePanel" :slotData="slotData" :hasHeaderOpt="true" title="选择身份">
        <div class="identities ta-c">
          <a v-for="(n, i) in slotData.identities" :key="i" @tap="onIdentityChange(i)" class="pd bd-b-light" style="color: #333;">
            {{n}}
            <span v-if="i == slotData.identityIdx" class="selected-flag"><i class="if icon-toast-correct" style="color: #00CFCB;"></i></span>
          </a>
        </div>
      </pop>
    </div>
    <div v-else class="pdt-xl ta-c">
      处理中...
    </div>
    <page-common></page-common>
    <div style="height: 150px;"></div>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import NotifyBtn from '@/components/notify-btn'
import { mapGetters, mapActions } from 'vuex'
import base from '@/mixins/base'
import Floor from '@/components/floor'
import Avatar from '@/components/avatar'
import Pop from '@/components/pop'
import * as $group from '@/api/group'

export default {
  mixins: [base],
  components: {
    PageCommon,
    Floor,
    NotifyBtn,
    Avatar,
    Pop
  },
  data () {
    return {
      identities: ['本人', '爸爸', '妈妈'],
      identityIdx: 0,
      isShowFamilyRolePanel: false,
      name: '',
      isGroupInfoComplete: '',
      isShowCompleteGroupInfoPanel: false,
    }
  },
  computed: {
    ...mapGetters('task', [
      'task'
    ]),
    identity () {
      return this.identities[this.identityIdx]
    },
    slotData () {
      return {
        identities: this.identities,
        identityIdx: this.identityIdx,
        identity: this.identity
      }
    }
  },
  methods: {
    ...mapActions('progress', [
      'createByTaskId'
    ]),
    ...mapActions('task', [
      'fetchById'
    ]),
    ...mapActions('group', [
      'getMyGroupInfo'
    ]),
    async loginBack (loginer) {
      try {
        let {taskId} = this.getParams()
        let task = await this.fetchById(taskId)

        // 资源拥有者打开此页面跳转到文档作业列表页
        let isDocumentOwner = parseInt(loginer.id) === parseInt(task.creator.id)
        if (isDocumentOwner) {
          wx.reLaunch({
            url: '/pages/documents/main?forward=task-progresses&taskId=' + taskId
          })
          return
        }
        // 学生的群组信息未完善
        let groupInfo = await this.getMyGroupInfo(task.groupId)
        if (!groupInfo || !groupInfo.name) {
          this.isGroupInfoComplete = 'N'
          return
        }

        // 学生群组信息已完善，创建progress并进行转向
        let progress = await this.createByTaskId(task.id)
        wx.redirectTo({
          url: '/pages/progress/main?progressId=' + progress.id + '&isShowSideMenu=y'
        })
      } catch (e) {
        this.$debug({err: e})
      }
    },
    onIdentityChange (idx) {
      this.identityIdx = idx
      this.isShowFamilyRolePanel = false
    },
    async onJoin () {
      try {
        let {taskId} = this.getParams()
        if (this.isLoading) return
        if (!this.name) return
        this.isLoading = true
        let role = 'user'
        if (this.identity === '爸爸') {
          role = 'father'
        } else if (this.identity === '妈妈') {
          role = 'mather'
        }
        let flag = await $group.join({groupId: this.task.groupId, name: this.name, role})
        this.isLoading = false
        let progress = await this.createByTaskId(taskId)
        if (!progress) {
          wx.showModal({title: 'progress null!'})
          return
        }
        wx.redirectTo({
          url: '/pages/progress/main?isShowSideMenu=y&progressId=' + progress.id
        })
      } catch (e) {
        wx.showModal({
          title: e.message
        })
      }
    },
    onReply () {
      this.$store.commit('UI_SET_TOAST_WARNING_MSG', '请先加入班级')
      this.isShowCompleteGroupInfoPanel = true
    }
  }
}
</script>
<style scoped lang="less">
.page {
  background-color: white;
  height: 100%;
}
.identities {
  a {
    display: block;
    color: #555;
    position: relative;
    .selected-flag {
      position: absolute;
      right: 32%;
      tpo: 0;
    }
  }
}
</style>
